<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="__PUBLIC__/Css/public.css">
<link rel="stylesheet" href="__PUBLIC__/Css/bootstrap.min.css">
<style>
	.container {
		margin-top: 12px;
	}

	.row {
		margin-bottom: 20px;
	}

	.row .row {
		margin-top: 10px;
		margin-bottom: 0;
	}

	input[type="checkbox"] {
		width: 30px;
		height: 16px;
	}

	tr th, tr td{
		text-align: center;
	}
	
	[class*="col-"] {
		padding-top: 15px;
		padding-bottom: 15px;
		background-color: rgba(86, 61, 124, 0.15);
		border: 1px solid #ddd;
	}
</style>
</head>
<body>
	<div class="container">
		<table class="table table-striped table-bordered table-hover">
			<thead>
				<tr>
					<th>选中</th>
					<th>校友圈编号</th>
					<th>发布者</th>
					<th>发布者班级</th>
					<th style="width: 240px;">发布内容</th>
					<th>发布图片</th>
					<th>发布日期</th>
					<th>是否通过审核</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
			<tfoot>
				<tr>
					<td><a href="javascript: void(0);" class="all" >全选</a></td>
					<td class="page" colspan="6">
						
					</td>
					<td></td>
				</tr>
				<tr>
					<td colspan="8">
						<button id="pass" class="btn btn-success btn-lg">选中审核通过</button>
					</td>
				</tr>
			</tfoot>
		</table>
	</div>
	<script src="__PUBLIC__/Js/jquery.js"></script>
	<script>
		var getApi = "{:U('Api/Moments/getMoments')}";
		var passApi = "{:U('Api/Moments/verifyPass')}";
		var currentPage = 1;
		var rowNum = 10;

		function postData(page, rowNum) {
			$.post(getApi, {page: page, rowNum: rowNum}, function(res){
				var $tbody = $('table tbody');
				var tr = '<tr class="active">';
				if (Array.isArray(res.data)) {
					res.data.forEach(function(ele, index) {
						ele.imgArr = ele.imgsrc.split(',');
						var img = ele.imgsrc ? '<img src="'+ ele.imgArr[0] +'" width="60" height="60" />' : 'none';
						tr += '<td><input type="checkbox" name="ids[]" value="'+ ele.id +'" /></td>'
								+ '<td>'+ ele.id +'</td>'
								+ '<td>'+ ele.truename +'</td>'
								+ '<td>'+ ele.classroom +'</td>'
								+ '<td>'+ ele.content +'</td>'
								+ '<td>'+ img +'</td>'
								+ '<td>'+ ele.pubdate +'</td>'
								+ '<td>'+ (ele.is_pass * 1 ? '是' : '否') +'</td></tr>';
					});
					$tbody.html(tr);
					renderPagination(res.total, page);
				} else {
					$tbody.empty();
				}
			});
		}

		function renderPagination(total, page) {
			var $colPage = $('tfoot .page');
			var pageTotal = Math.ceil(total/rowNum);
			var pages = '';
			for(var i = 1; i<= pageTotal; i++) {
				var current = page === i ? 'current' : '';
				pages += '<a href="javascript: void(0);" class="'+current+'" data-page="'+ i +'">'+ i +'</a>';
			}
			$colPage.html('<a class="prev pagination" href="javascript: void(0);" >上一页</a>'
						 + pages
						 + '<a class="next pagination" href="javascript: void(0);" >下一页</a>'
						 + '共<span class="total">'+ pageTotal +'</span>页');
			$colPage.one('click', 'a', {pageTotal: pageTotal}, handlePage);
		}

		function handlePage(e) {
			var prevPage = currentPage;
			var pageTotal = e.data.pageTotal;
			if($(this).hasClass('next') && currentPage < pageTotal) {
				currentPage ++;
			} else if ($(this).hasClass('prev') && currentPage > 1) {
				currentPage --;
			} else if ($(this).data('page')) {
				currentPage = $(this).data('page');
			}

			if (prevPage !== currentPage) {
				postData(currentPage, rowNum);
			} else {
				$('tfoot .page').one('click', 'a', {pageTotal: e.data.pageTotal}, handlePage);
			}
		}

		function postPass(ids) {
			$.post(passApi, {ids: ids}, function(res){
				if(res.status*1 === 200) {
					window.location.reload(true);
				}
			}, 'json');
		}

		$(function() {
			var $all_btn = $('tfoot .all');
			var $pass_btn = $('#pass');
			postData(currentPage, rowNum);

			$all_btn.on('click', function() {
				var $checkIds = $('td input[name="ids[]"]');
				$checkIds.prop('checked', function(i, val){
					return !val;
				});
			});

			$pass_btn.click(function() {
				var $checkIds = $('td input[name="ids[]"]');
				var ids = [];
				$checkIds.each(function(i, ele) {
					if($(ele).prop('checked')) {
						ids.push($(ele).val()*1);
					}
				});
				postPass(ids);
			})
		})
	</script>
</body>
</html>
